<template>
   <el-form-item label="规格选项" v-loading="bodyloading">
      <el-card shadow="never" class="w-full mb-3" v-for="(item,index) in sku_card_list" :key="index">
        <template #header>
        <div class="flex items-center">
          <el-input v-model="item.text" placeholder="规格名称" 
          style="width: 200px;" @change="handleUpdate(item)" v-loading="item.loading">
            <template #append>
              <el-icon class="cursor-pointer" @click="handleChooseSku(item)"><more/></el-icon>
            </template>
          </el-input>
          <el-button class="ml-auto" size="small" @click="sotCard('up',index)" :disable="index == 0"><el-icon><Top /></el-icon></el-button>
          <el-button size="small" @click="sotCard('down',index)" :disable="index === (sku_card_list.length-1)"><el-icon><Bottom /></el-icon></el-button>
           <el-popconfirm title="是否要删除该选项?" confirm-button-text="确认" cancel-button-text="取消"
                @confirm="handleDelete(item)"> <!---访问数据行的id-->
                <template #reference>
                  <el-button size="small"><el-icon><Delete /></el-icon></el-button>
                </template>
            </el-popconfirm>
        </div>
        </template>
        <SkuCardItem :skuCardId="item.id" />
      </el-card>

      <el-button type="success"size="small" :loading="btnloading" 
       @click="addSkuCardEvent">
        添加规格
      </el-button>
      
    </el-form-item>
    
    <ChooseSku  ref="ChooseSkuRef"/>
</template>
<script setup >
import { ref } from "vue"
import SkuCardItem from "./SkuCardItem.vue"
import ChooseSku from "@/components/ChooseSku.vue"
import {
  sku_card_list,
  addSkuCardEvent,
  btnloading,
  handleUpdate,
  handleDelete,
  sotCard,
  bodyloading,
  handleChooseSetGoodsSkusCard
} from "@/composables/useSku"

const ChooseSkuRef = ref(null)
const handleChooseSku = (item)=>{
    ChooseSkuRef.value.open((value)=>{
      handleChooseSetGoodsSkusCard(item.id,{
        name:value.name,
        value:value.list
      })
    })
}
</script>

<style>
.el-card__header{
  @apply !p-2 bg-gray-50;
}
</style>